<template>
    <div class="singer">
      <Header title="歌手" go-back="true"></Header>
      <back-top></back-top>
      <div class="singer-header">
        <div class="img">
          <img :src="artist.img1v1Url" alt="">
        </div>
        <div class="singer-des">
          <h1>{{artist.name}}</h1>
          <h2><span v-for="(n,index1) in artist.alias" :key="index1">{{n}}</span></h2>
          <div class="div1">单曲数:<span>{{artist.musicSize}}</span>&nbsp;专辑数:<span>{{artist.albumSize}}</span>&nbsp;MV数:<span >{{artist.mvSize}}</span></div>
        </div>
        <div class="homepage" @click="$router.push('/Personal/' + id)">
          <span>查看个人主页</span>
        </div>
      </div>
      <div class="tabs">
        <tabs value="name1" type="line">
          <tab-pane label="热门" name="name1">
            <div class="tabs-container">
              <ul>
                <li v-for="(song,index2) in hotSongs" :key="index2" @click="goPersonal(song.id,song.al.picUrl,song.name,song.ar[0].name)">
                  <div class="div1"><p>{{index2+1}}</p></div>
                  <div class="div2"><p>{{song.name}}</p></div>
                  <div class="div3" style="text-align: center"><p>{{song.ar[0].name}}</p></div>
                </li>
              </ul>
            </div>
          </tab-pane>
          <tab-pane label="MV" name="name2">
            <div class="tabs-container">
              <div class="grid">
                <Row :gutter="5">
                  <!--col的总和为24-->
                  <i-col span="8" v-for="(mv,mindex) in mvs" :key="mindex">
                    <div class="grid_div" :style="{backgroundImage: 'url(' + mv.imgurl16v9 + ')'}">
                      <div class="video-num">
                        <img src="../../../assets/Image/video.png" alt="">
                        <span>{{mv.playCount}}</span>
                      </div>
                    </div>
                    <h3>{{mv.name}}</h3>
                    <p>{{mv.publishTime}}</p>
                  </i-col>
                </Row>
              </div>
            </div>
          </tab-pane>
          <tab-pane label="专辑" name="name3">
            <div class="tabs-container">
              <div class="album">
                <Row :gutter="6">
                  <!--col的总和为24-->
                  <i-col span="6" v-for="(al,mindex) in albums" :key="mindex">
                    <div class="grid_div" :style="{backgroundImage: 'url(' + al.blurPicUrl + ')'}">
                      <div class="video-num">
                      </div>
                    </div>
                    <h3>{{al.name}}</h3>
                    <p>{{al.publishTime | dateFmt}}</p>
                  </i-col>
                </Row>
              </div>
            </div>
          </tab-pane>
          <tab-pane label="歌手详情" name="name4">
            <div class="tabs-container">
              <ol class="singer-desc">
                <div class="title">{{singerName}}简介</div>
                <div class="desc-content">
                  <p>{{briefDesc}}</p>
                </div>
                <li v-for="(des,dindex) in arr" :key="dindex">
                  <div class="title2">{{des.ti}}</div>
                  <div class="desc-content2">
                    <p>{{des.txt}}</p>
                  </div>
                </li>
              </ol>
            </div>
          </tab-pane>
        </tabs>
      </div>
    </div>
</template>

<script>
import Header from '../../Header/Header'
import BackTop from '../../backtop/src/main'
import {formatDate} from '../../../comment/time'
import {getArtists, getSingerMV, getAlbum, getSingerDesc} from '../../../api/node'
import {saveSongId, saveSongUrl, saveSongName, saveSingerName} from '../../../api/storage'

export default {
  name: 'singer',
  data () {
    return {
      singerName: '', // 歌手名字
      theme1: 'light',
      artist: {}, // 简介
      hotSongs: [], // 歌曲
      id: '',
      singerId: '', // 歌手id
      mvs: [], // mv
      albums: [], // 专辑
      briefDesc: '', // 歌手简介
      arr: []
    }
  },
  // 过滤器
  filters: {
    formatDate (time) {
      var date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm')
    }
  },
  created () {
    this.id = this.$route.params.id
    getArtists(this.$route.params.id).then(res => {
      // console.log(res)
      if (res.code === 200) {
        this.artist = res.artist
        this.singerName = res.artist.name
        this.singerId = res.artist.id
        this.hotSongs = res.hotSongs
        this._getSingerMV(this.singerId) // mv
        this._getAlbum(this.singerId) // 专辑
        this._getSingerDesc(this.singerId) // 歌手描述
      }
    })
  },
  methods: {
    goPersonal (id, url, sname, name) {
      saveSongId(id)
      saveSongUrl(url) // 歌曲封面
      saveSongName(sname) // 歌曲名
      saveSingerName(name) // 歌手名
      this.$router.push('/songPlay2')
    },
    // 歌手MV
    _getSingerMV (id) {
      getSingerMV(id).then(res => {
        if (res.code === 200) {
          this.mvs = res.mvs
        }
      })
    },
    // 歌手专辑
    _getAlbum (id) {
      getAlbum(id).then(res => {
        if (res.code === 200) {
          this.albums = res.hotAlbums
          // console.log(this.albums)
        }
      })
    },
    // 歌手描述
    _getSingerDesc (id) {
      getSingerDesc(id).then(res => {
        if (res.code === 200) {
          this.briefDesc = res.briefDesc
          this.arr = res.introduction
        }
      })
    }
  },
  components: {
    Header,
    BackTop
  }
}
</script>

<style lang="scss" scoped>
.ivu-tabs-bar{
  margin: 0;
}
.singer{
  width: 100%;
  padding-top: 50px;
  .singer-header{
    width: 100%;
    height: 120px;
    padding: 10px;
    display: -webkit-inline-box;
    align-items: center;
    justify-content: space-between;
    .img{
      img{
        width: 90px;
        height: 90px;
      }
    }
    .singer-des{
      h1{
        font-size: 15px;
        font-weight: normal;
      }
      h2{
        font-weight: normal;
        padding-top: 10px;
        span{
          font-size: 12px;
          color: #999;
        }
      }
      .div1{
        font-size: 13px;
        font-weight: normal;
        padding-top: 10px;
        span{
          color: #999;
        }
      }
    }
    .homepage{
      height: 77px;
      span{
        margin-top: 10px;
      }
    }
  }
  .tabs-container{
    width: 100%;
    padding: 10px;
    ul{
      li{
        display: flex;
        border-bottom: 1px solid #f2f2f2;
        justify-content: space-between;
        .div1,.div2,.div3{
          width: 33.33%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          p{
            line-height: 40px;
            font-size: 14px;
          }
        }
      }
    }
    .grid{
      padding-top: 10px;
      .ivu-row{
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      .ivu-col-span-8 {
        padding-bottom: 20px;
        .grid_div{
          text-align: center;
          height: 70px;
          background-size: 100% 100%;
          position: relative;
          .video-num{
            /*width: 60px;*/
            height: 20px;
            background: rgba(0,0,0,0.5);
            position: absolute;
            right: 0;
            img{
              width: 20px;
              float: left;
            }
            span{
              color: #fff;
              float: left;
              line-height: 20px;
              padding-left: 10px;
              padding-right: 5px;
            }
          }
        }
        h3{
          font-weight: normal;
          font-size: 15px;
          padding-top: 10px;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p{
          font-size: 12px;
          color: #666;
        }
      }
    }
    .album{
      padding-top: 10px;
      .ivu-row{
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      .ivu-col-span-6 {
        padding-bottom: 20px;
        .grid_div{
          text-align: center;
          height: 70px;
          background-size: 100% 100%;
          position: relative;
          .video-num{
            /*width: 60px;*/
            height: 20px;
            background: rgba(0,0,0,0.5);
            position: absolute;
            right: 0;
            img{
              width: 20px;
              float: left;
            }
            span{
              color: #fff;
              float: left;
              line-height: 20px;
              padding-left: 10px;
              padding-right: 5px;
            }
          }
        }
        h3{
          font-weight: normal;
          font-size: 15px;
          padding-top: 10px;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p{
          font-size: 12px;
          color: #666;
        }
      }
    }
    .singer-desc{
      width: 100%;
      .title{
        display: flex;
        border-bottom: 1px solid #f2f2f2;
        line-height: 30px;
        font-size: 15px;
        font-weight: bolder;
      }
      .desc-content{
        padding-top: 10px;
        p{
          line-height: 20px;
          font-size: 13px;
        }
      }
        li{
          .title2{
            display: flex;
            border-bottom: 1px solid #f2f2f2;
            line-height: 30px;
            font-size: 15px;
            font-weight: bolder;
          }
          .desc-content2{
            padding-top: 10px;
            p{
              line-height: 20px;
              font-size: 13px;
            }
          }
      }
    }
  }
}
</style>
